<template>
	<view class="page">
		<!-- 搜索 -->
		<view class=" article-search">
			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input type="text" placeholder="输入搜索内容" />
				<button class="search-button">搜索</button>
			</view>
			<view class="shop" @click="shopping">
				<u-icon label="购物车" labelPos="bottom" size="30" labelSize="12" name="shopping-cart"></u-icon>

			</view>
		</view>
		<!-- 拍卖品展示 -->
		<view class="shoppingShow">
			<!-- 商家列表 -->
			<view class="recommend-info">
				<view class="goods-list">
					<view class="list" v-for="(item,index) in goodsList" :key="index">
						<!-- 商家图片 -->
						<view class="">
							<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true"
								autoplay="true" interval="5000" duration="500">
								<swiper-item v-for="(el,idx) in item" :key="idx">
									<image :src="el.title_img" mode="aspectFill" @click="gotopaimai(el)"></image>
								</swiper-item>
							</swiper>
						</view>
						
						
					</view>
				</view>
				<view class="text">
					拍卖品展示
				</view>
			</view>

		</view>

		<!-- 分类展示 -->
		<view class="catgory">
			<view class="service-list">
				<view class="list" @click="onServer('class',el.id)" v-for="(el,idx) in categoryList" :key="idx">
					<view class="thumb">
						<image src="http://140.143.146.33/wxImg/static/tool/ciqi.png"></image>
					</view>
					<view class="name">
						<text>{{el.name}}</text>
					</view>
				</view>
				<!-- <view class="list" @click="onServer('shuhua')">
					<view class="thumb">
						<image src="http://140.143.146.33/wxImg/static/tool/shuhuashi.png"></image>
					</view>
					<view class="name">
						<text>书画</text>
					</view>
				</view>
				<view class="list" @click="onServer('yuqi')">
					<view class="thumb">
						<image src="http://140.143.146.33/wxImg/static/tool/yuqizhubao.png"></image>
					</view>
					<view class="name">
						<text>玉器</text>
					</view>
				</view> -->
				<view class="list" @click="onServer('class')">
					<view class="thumb">
						<image src="http://140.143.146.33/wxImg/static/tool/gengduo.png"></image>
					</view>
					<view class="name">
						<text>更多</text>
					</view>
				</view>
			</view>

		</view>
		<!-- 热销产品 -->
		<text style="font-size: 36rpx; font-weight: bold;">热销产品</text>
		<view class="root">
			<view class="sticky-filter">
				<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='ed'>
				</ren-dropdown-filter>
			</view>
		</view>
		<view class="production">
			<view class="production-container">
				<view class="production-item" v-for="(item, index) in swiperList" :key="index" @click="gotoGoods(item)">
					<u--image :showLoading="true" radius="20rpx 20rpx 0 0" :src="item.img_list[0]" width="320rpx"
						height="350rpx"></u--image>
					<u--text margin="10rpx" :text="item.title" size="16"></u--text>
					<u--text margin="10rpx" :text="item.real_price" color="#9b742f" size="16"
						radius="30rpx">{{ item.real_price }}</u--text>
				</view>
			</view>

		</view>
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	
	import TabBar from '../../components/TabBar/TabBar.vue';
	// 引入mescroll-mixins.js getAllLinesGoods
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	import {
		getAllLinesGoods,
		getAuctionGoodsList,
		getCategoryList
	} from '@/config/api.js';
	const randomSplitArray =  (arr) => {
		const arr1 = [];
		const arr2 = [];
		const arr3 = [];
		arr.forEach((item,idx) =>{
			if (idx % 3 === 0) {
				arr1.push(item);
			} else if (idx % 3 === 1) {
				arr2.push(item);
			} else {
				arr3.push(item);
			}
			// const randomIndex = Math.floor(Math.random() * 3);
			// if (randomIndex === 0) {
			// 	arr1.push(item);
			// } else if (randomIndex === 1) {
			// 	arr2.push(item);
			// } else {
			// 	arr3.push(item);
			// }
		});
		return [arr1, arr2, arr3];
	}
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
		},
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false
				},
				queryList:{
					page: 1,
					limit: 30,
					name: '',
				},
				paimaiqueryList:{
					page: 1,
					limit: 30,
					name: '',
					des:'1',
					category_id:-1
				},
				swiperList: [{
						id: 0,
						name: '白玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 1,
						name: '血玉',
						price: '￥10000',
						type: 'image',
						url: '/static/img/banner_02.png'
					},
					{
						id: 2,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 3,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 3,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 4,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 5,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 6,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},

				],
				filterData: [
					[{
						text: '价格',
						value: ''
					}, {
						text: '综合',
						value: 1
					}, {
						text: '价格从高到底',
						value: 2
					}, {
						text: '价格从低到高',
						value: 3
					}],
					[{
						text: '销量',
						value: ''
					}, {
						text: '综合',
						value: 1
					}, {
						text: '从高到底',
						value: 2
					}, {
						text: '从低到高',
						value: 3
					}],
					[{
						text: '评价',
						value: ''
					}, {
						text: '综合',
						value: 1
					}, {
						text: '从高到底',
						value: 2
					}, {
						text: '从低到高',
						value: 3
					}]
				],
				defaultIndex: [0, 0, 0],
				filteredList: [],
				goodsList: [{
						id: 1,
						name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
						price: '219.00',
						vip_price: '129.00',
						img: '/static/img/goods_thumb_01.png',
						is_goods: 0,
					},
					{
						id: 1,
						name: '花花公子 卫衣男秋季圆领薄款休闲体恤男士时尚长袖T恤外套上衣男生情侣装套头衣服秋天男装 白色 XL',
						price: '139.00',
						vip_price: '99.00',
						img: '/static/img/goods_thumb_02.png',
						is_goods: 1,
					},
					{
						id: 1,
						name: '【两件套】花花公子PLAYBOY短袖T恤男套装夏季新款卫衣男士韩版修身冰丝宽松运动休闲上衣服裤子男装 CYFS903卡其色 XL',
						price: '168.00',
						vip_price: '158.00',
						img: '/static/img/goods_thumb_03.png',
						is_goods: 1,
					},

				],
				categoryList:[],
				show: true

			};
		},
		onShow(){
			
			getAllLinesGoods(this.queryList).then(res => {
				this.swiperList = res.data;
			});
			getAuctionGoodsList(this.paimaiqueryList).then(res => {
				
				this.goodsList =randomSplitArray(res.data);
				
			});
			getCategoryList({
				nav_id:13,
			}).then(res => {
				this.categoryList = res.slice(0, 3);
			});
		},
		methods: {
			gotopaimai(item){
				uni.navigateTo({
					url: `/moduleB/GoodsDetails/paipindetails?title=${encodeURIComponent(item.title+'详情')}&goodsId=${item.id}`,
				});
			},
			gotoGoods(item){
				uni.navigateTo({
					url: `/moduleB/GoodsDetails/GoodsDetails?title=${encodeURIComponent(item.title+'详情')}&goodsId=${item.id}`,
				});
			},
			// 商品详情
			onSkip(type) {
				switch (type) {

					case 'goods':
						uni.navigateTo({
							url: '/moduleB/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			},
			//筛选条件
			ed(selectedFilter) {
				// 过滤逻辑，根据所选筛选条件更新 filteredList
				this.filteredList = this.swiperList.filter(item => item.category === selectedFilter);
			},

			shopping() {
				uni.navigateTo({
					url: '/moduleB/cart/cart'
				});


			},
			onServer(type,id) {
				switch (type) {
					case 'class':
						uni.navigateTo({
							url: id?'/moduleB/class/class?id='+id:'/moduleB/class/class'
						})
						break;
					case 'ciqi':
						uni.navigateTo({
							url: '/moduleB/ciqi/ciqi'
						})
						break;
					case 'shuhua':
						uni.navigateTo({
							url: '/moduleB/shuhua/shuhua'
						})
						break;
					case 'yuqi':
						uni.navigateTo({
							url: '/moduleB/yuqi/yuqi'
						})
						break;
				}
			},


		}
	}
</script>

<style scoped lang="scss">
	@import 'discover.scss';
</style>